<template>
  <div class="xu-zhou-datav-map">
    <div class="map-header">
      <h1 class="map-title">徐州地区设备分布监控大屏</h1>
      <div class="map-stats">
        <dv-decoration-8 style="width:300px;height:50px;" />
        <div class="stat-cards">
          <dv-border-box-12 class="stat-card">
            <div class="stat-content">
              <dv-digital-flop :config="totalDevicesConfig" style="width:100%;height:40px;" />
              <span class="stat-label">设备总数</span>
            </div>
          </dv-border-box-12>
          <dv-border-box-12 class="stat-card">
            <div class="stat-content">
              <dv-digital-flop :config="onlineDevicesConfig" style="width:100%;height:40px;" />
              <span class="stat-label">在线设备</span>
            </div>
          </dv-border-box-12>
          <dv-border-box-12 class="stat-card">
            <div class="stat-content">
              <dv-digital-flop :config="offlineDevicesConfig" style="width:100%;height:40px;" />
              <span class="stat-label">离线设备</span>
            </div>
          </dv-border-box-12>
        </div>
        <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
      </div>
    </div>

    <div class="map-content">
      <div class="left-panel">
        <dv-border-box-13 class="region-list">
          <h3>区域设备统计</h3>
          <dv-scroll-board 
            :config="regionTableConfig" 
            style="width:100%;height:calc(100% - 40px);"
            @click="handleRegionClick"
          />
        </dv-border-box-13>
      </div>

      <div class="center-map">
        <dv-border-box-10 class="map-container">
          <dv-flyline-chart-enhanced
            :config="mapConfig"
            :dev="true"
            style="width: 100%; height: 100%"
          />
        </dv-border-box-10>
      </div>

      <div class="right-panel">
        <dv-border-box-13 class="device-ranking">
          <h3>设备数量排行</h3>
          <dv-scroll-ranking-board 
            :config="rankingConfig" 
            style="width:100%;height:calc(100% - 40px);"
          />
        </dv-border-box-13>
        
        <dv-border-box-13 class="status-chart">
          <h3>设备状态分布</h3>
          <dv-active-ring-chart 
            :config="statusChartConfig" 
            style="width:100%;height:calc(100% - 40px);"
          />
        </dv-border-box-13>
      </div>
    </div>

    <div class="bottom-info">
      <dv-border-box-8 class="real-time-info">
        <div class="info-content">
          <h4>实时信息</h4>
          <dv-scroll-board 
            :config="realTimeInfoConfig" 
            style="width:100%;height:calc(100% - 30px);"
          />
        </div>
      </dv-border-box-8>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 区域设备数据
const regionData = ref([
  { name: '鼓楼区', count: 45, online: 42, offline: 3, coordinate: [0.35, 0.45] },
  { name: '云龙区', count: 38, online: 35, offline: 3, coordinate: [0.42, 0.48] },
  { name: '泉山区', count: 67, online: 64, offline: 3, coordinate: [0.33, 0.52] },
  { name: '铜山区', count: 89, online: 85, offline: 4, coordinate: [0.30, 0.58] },
  { name: '贾汪区', count: 52, online: 48, offline: 4, coordinate: [0.48, 0.38] },
  { name: '丰县', count: 34, online: 31, offline: 3, coordinate: [0.15, 0.30] },
  { name: '沛县', count: 41, online: 39, offline: 2, coordinate: [0.25, 0.25] },
  { name: '睢宁县', count: 56, online: 53, offline: 3, coordinate: [0.55, 0.65] },
  { name: '新沂市', count: 48, online: 45, offline: 3, coordinate: [0.62, 0.42] },
  { name: '邳州市', count: 73, online: 69, offline: 4, coordinate: [0.58, 0.32] }
])

// 计算统计数据
const totalDevices = computed(() => 
  regionData.value.reduce((sum, region) => sum + region.count, 0)
)

const onlineDevices = computed(() => 
  regionData.value.reduce((sum, region) => sum + region.online, 0)
)

const offlineDevices = computed(() => 
  regionData.value.reduce((sum, region) => sum + region.offline, 0)
)

// DataV配置
const totalDevicesConfig = reactive({
  number: [totalDevices.value],
  content: '{nt}',
  style: {
    fontSize: 32,
    fill: '#00ff88',
    fontWeight: 'bold'
  }
})

const onlineDevicesConfig = reactive({
  number: [onlineDevices.value],
  content: '{nt}',
  style: {
    fontSize: 32,
    fill: '#00d4ff',
    fontWeight: 'bold'
  }
})

const offlineDevicesConfig = reactive({
  number: [offlineDevices.value],
  content: '{nt}',
  style: {
    fontSize: 32,
    fill: '#ff4444',
    fontWeight: 'bold'
  }
})

// 区域表格配置
const regionTableConfig = reactive({
  header: ['区域名称', '设备总数', '在线', '离线', '在线率'],
  data: [],
  index: true,
  columnWidth: [50, 100, 80, 80, 80, 80],
  align: ['center', 'center', 'center', 'center', 'center'],
  rowNum: 8,
  headerBGC: 'rgba(0, 212, 255, 0.1)',
  oddRowBGC: 'rgba(0, 20, 40, 0.5)',
  evenRowBGC: 'rgba(0, 40, 80, 0.5)'
})

// 排名配置
const rankingConfig = reactive({
  data: [],
  rowNum: 5,
  waitTime: 2000,
  carousel: 'single',
  unit: '台'
})

// 状态图表配置
const statusChartConfig = reactive({
  radius: '65%',
  activeRadius: '70%',
  data: [
    {
      name: '在线设备',
      value: onlineDevices.value
    },
    {
      name: '离线设备',
      value: offlineDevices.value
    }
  ],
  lineWidth: 15,
  color: ['#00ff88', '#ff4444'],
  digitalFlopStyle: {
    fontSize: 20,
    fill: '#00d4ff'
  }
})

// 地图配置
const mapConfig = reactive({
  points: [],
  lines: [],
  icon: {
    show: true,
    src: '●PC90ZXh0Pgo8L3N2Zz4K',
    width: 30,
    height: 30
  },
  text: {
    show: true,
    offset: [0, 20],
    color: '#00d4ff',
    fontSize: 14
  },
  k: 0.5,
  bgImgSrc: ''
})

// 更新配置数据
const updateConfigData = () => {
  // 更新区域表格
  regionTableConfig.data = regionData.value.map(region => [
    region.name,
    region.count,
    region.online,
    region.offline,
    `${((region.online / region.count) * 100).toFixed(1)}%`
  ])

  // 更新排名数据
  rankingConfig.data = regionData.value
    .sort((a, b) => b.count - a.count)
    .map(region => [region.name, region.count])

  // 更新状态图表
  statusChartConfig.data = [
    { name: '在线设备', value: onlineDevices.value },
    { name: '离线设备', value: offlineDevices.value }
  ]

  // 更新地图点和连线
  mapConfig.points = regionData.value.map(region => ({
    name: region.name,
    coordinate: region.coordinate,
    halo: {
      show: true,
      color: region.online / region.count > 0.9 ? '#00ff88' : 
             region.online / region.count > 0.7 ? '#ffaa00' : '#ff4444',
      duration: 2000
    },
    icon: {
      src: `data:image/svg+xml;base64,${btoa(`<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
        <circle cx="20" cy="20" r="${Math.max(8, Math.min(16, region.count / 6))}" 
                fill="${region.online / region.count > 0.9 ? '#00ff88' : '#ffaa00'}" 
                stroke="#00d4ff" stroke-width="2"/>
        <text x="20" y="25" text-anchor="middle" fill="#fff" font-size="12">${region.count}</text>
      </svg>`)}`,
      width: 40,
      height: 40
    },
    text: region.name
  }))

  // 添加连接线（从中心到各个区域）
  const center = [0.4, 0.45] // 徐州市中心位置
  mapConfig.lines = regionData.value.map(region => ({
    source: center,
    target: region.coordinate,
    color: '#00d4ff',
    width: 2,
    dashArray: [5, 5]
  }))

  // 更新实时信息
  const now = new Date().toLocaleTimeString('zh-CN')
  realTimeInfoConfig.data = [
    [now, '鼓楼区', '设备状态检查', '正常'],
    [now, '云龙区', '网络连接检测', '正常'],
    [now, '泉山区', '数据同步完成', '成功']
  ]

  // 更新数字翻牌器
  totalDevicesConfig.number = [totalDevices.value]
  onlineDevicesConfig.number = [onlineDevices.value]
  offlineDevicesConfig.number = [offlineDevices.value]
}

// 处理区域点击
const handleRegionClick = (row) => {
  const regionName = regionTableConfig.data[row.rowIndex][0]
  const region = regionData.value.find(r => r.name === regionName)
  if (region) {
    // 高亮显示选中的区域
    const point = mapConfig.points.find(p => p.name === regionName)
    if (point) {
      point.halo.color = '#ffffff'
      point.halo.duration = 1000
      
      setTimeout(() => {
        point.halo.color = region.online / region.count > 0.9 ? '#00ff88' : 
                          region.online / region.count > 0.7 ? '#ffaa00' : '#ff4444'
      }, 1000)
    }
  }
}

// 定时更新数据
let updateInterval

onMounted(() => {
  updateConfigData()
  updateInterval = setInterval(() => {
    // 模拟数据变化
    regionData.value.forEach(region => {
      const randomChange = Math.floor(Math.random() * 3) - 1
      region.online = Math.max(0, Math.min(region.count, region.online + randomChange))
      region.offline = region.count - region.online
    })
    updateConfigData()
  }, 5000) // 每5秒更新一次
})

onUnmounted(() => {
  if (updateInterval) {
    clearInterval(updateInterval)
  }
})
</script>

<style scoped>
.xu-zhou-datav-map {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  position: relative;
  overflow: hidden;
}

.map-header {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
}

.map-title {
  color: #00d4ff;
  font-size: 32px;
  font-weight: bold;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  margin: 0;
}

.map-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-cards {
  display: flex;
  gap: 20px;
}

.stat-card {
  width: 150px;
  height: 80px;
  padding: 10px;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.stat-label {
  color: #a0d0ff;
  font-size: 14px;
  margin-top: 5px;
}

.map-content {
  display: flex;
  height: calc(100vh - 120px);
  padding: 20px;
  gap: 20px;
}

.left-panel {
  width: 300px;
}

.center-map {
  flex: 1;
}

.right-panel {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.region-list,
.device-ranking,
.status-chart {
  height: 300px;
  padding: 20px;
}

.device-ranking {
  height: 200px;
}

.status-chart {
  height: 200px;
}

.region-list h3,
.device-ranking h3,
.status-chart h3,
.real-time-info h4 {
  color: #00d4ff;
  margin: 0 0 15px 0;
  font-size: 18px;
  text-align: center;
}

.map-container {
  height: 100%;
  padding: 20px;
}

.bottom-info {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 1200px;
}

.real-time-info {
  height: 150px;
  padding: 15px;
}

.info-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.info-content h4 {
  margin: 0 0 10px 0;
  color: #00d4ff;
  font-size: 16px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .map-content {
    flex-direction: column;
  }
  
  .left-panel,
  .right-panel {
    width: 100%;
    display: flex;
    gap: 20px;
  }
  
  .region-list,
  .device-ranking,
  .status-chart {
    flex: 1;
  }
  
  .device-ranking,
  .status-chart {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .map-header {
    flex-direction: column;
    gap: 20px;
  }
  
  .map-stats {
    flex-direction: column;
  }
  
  .stat-cards {
    flex-direction: column;
  }
}
</style>